<template>
  <div class="car-list">
  <l-page-bar>
    二手车搜索结果页
  </l-page-bar>

  <l-page-path>
    二手车搜索结果页
  </l-page-path>
  
  <div class="car-list-search-bar">
    <l-search-bar :config='searchBarConfig'></l-search-bar>
  </div>
  
  
  <div class="page-content">

    <i-row :gutter='20' >
      
      <!-- cars -->
      <i-col :sm='18' :xm='24'>

        <i-row :gutter='20'>
          <i-col :sm='8' :xm='24' v-for='(item, index) of carList' :key='index'>
            <div class="car-item">
              <l-car-card  :info='item' ></l-car-card>
            </div>
            </i-col>
        </i-row>
        
      </i-col>

      <!-- banner -->
      <i-col :sm='6'>
        <div class="advertisement">
            Advertisement
        </div>
      </i-col>
      
    </i-row>
    
    <div class="page-bar">
      <i-page :total='pageTotal' :pageSize='pageSize' ></i-page>
    </div>
      
  </div>
  </div>
</template>

<script scoped lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import CarCard from '@/components/car_card/index.vue';
import ICarCard from '@/components/car_card/index.vue';
import SearchBar from '@/components/search_bar/index.vue';
import PageBar from '@/components/page_bar/index.vue';
import PagePath from '@/components/page_path/index.vue';
import commendData from '@/utils/commend.ts';


@Component({
  components:{
    'l-car-card': CarCard,
    'l-search-bar': SearchBar,
    'l-page-bar': PageBar,
    'l-page-path': PagePath
  }
})
export default class CarList extends Vue {

  pageSize: number = 9
  currentPage: number = 0
  carList: Array<ICarCard> = [] 
  pageTotal: number = 1
  $API: any
  $globState: any
  searchBarConfig:any = []

  created(){
    this.getCarList()
    this.searchBarConfig = this.$globState.searchConfig.car
  }

  // 请求列表
  getCarList(){
    let $API:any = this.$API; 
    
  
    $API.getCarList({
      pageSize:this.pageSize,
      currentPage: this.currentPage 
    }).then( (res: any) =>{

      this.carList = res.cars;
      this.pageTotal = res.pages.total;
        
    })
     
  }
  
}

</script>
<style scoped lang="less">

.car-list{

}

.car-item{
  margin-bottom: 20*@rem;
}

.advertisement{
  height: 100%;
  background: #eee;
}

</style>
